<template>
	<div>
		<hot-table :settings="hotSettings" licenseKey="non-commercial-and-evaluation"></hot-table>
	</div>
</template>

<script>
	import {
		HotTable,
		HotColumn
	} from '@handsontable/vue';
	import Handsontable from 'handsontable';

	export default {
		name: 'HelloWorld',
		data() {
			return {
				hotSettings: {
					data: Handsontable.helper.createSpreadsheetData(5,10),
					colHeaders: true,
					rowHeaders: true,
					hiddenColumns: false,
					contextMenu: true,
					manualColumnMove: true,
					manualRowMove: true,
					nestedHeaders: [
						['A', {label: 'B', colspan: 8}, 'C'],
						['D', {label: 'E', colspan: 4}, {label: 'F', colspan: 4}, 'G'],
						['H', {label: 'I', colspan: 2}, {label: 'J', colspan: 2}, {label: 'K', colspan: 2}, {label: 'L', colspan: 2}, 'M'],
						['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W']
				    ],
				},
			}
		},
		components: {
			HotTable,HotColumn
		}

	}
</script>
